<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
                list-style: none;
            }
            .header{
                height: 66px;
                background-color: snow;
                border-bottom: 1px solid #e5e5e5;
                position: fixed;
                width: 100%;
                z-index: 1;
                top:0;
            }
            .header span{
                color: black;
                height: 66px;
                width: 40px;
                font-weight: 1000;
                font-size: 20px;
                margin: 20px 100px;
                float: left;
            }
            .head{
                height: 66px;
                width: 500px;
                float: left;
                padding: 20px;
            }
            .head2{
                float: right;
                padding: 20px 29px;
            }
            .header .head li{
                background: yellow;
                font-size: 20px;
                border-radius: 50%;
                float: left;
                border: 1px solid yellow;
                margin-right: 19px;
            }
            .banner{
                width: 1214px;
                height: 514px;
                margin: 27px auto 25px;
            }
            .banner .left{
                width: 910px;
                float: left;
            }
            .banner .left img{
                width: 910px;
            }
            .banner .right{
                float: right;
                width: 290px;
            }
            .banner .right li{
                width: 290px;
                height: 163px;
                margin-bottom: 12px;
                overflow: hidden;
                position: relative;
            }
            .banner .right img{
                width: 290px;
            }
            .banner .right p{
                position: absolute;
                left: 0px;
                bottom: 0px;
                color:white;
                background: rgba(0, 0, 0, 0.6);
                font-size: 20px;
            }
            .menu{
                height: 37px;
                width: 1214px;
                margin: 0px auto 27px;
            }
            .menu li{
                float: left;
                border: 1px solid #999;
                margin-right:10px;
                font-size: 20px;
                line-height: 34px;
                padding-right: 110px;
                border-radius: 5px;
                padding-left: 10px;
            }
            .list{
                height: 1091px;
                width: 1240px;
                margin: 0px auto 27px;
            }
            .list li{
                float:left;
                background: white;
                width: 292px;
                height: 350px;
                margin: 7px 7px;
                border-radius: 5px;
                border-bottom: 1px solid gray;
            }
            .list p{
                margin: 5px 15px;
                height: 50px;
            }
            .list span{
                color: gray;
                margin-top:20px; 
            }
            .list li .left{
                float: left;
            }
            .list li .right1{
                float: right;
                 
            }
            .list li .right2{
                float: right;
                margin-right:10px;
            }
            .list img{
                width: 292px;
                height: 207px;
                overflow: hidden;
            }
            .more{
                text-align:center;
                background: white;
                border: 1px solid gray;
                height: 35px;
                width: 1220px;
                margin: 0 auto;
                font-size: 15px;
            }
            .w{
                color: gray;
                width: 1220px;
                margin: 20px auto;
            }
            .partner{
                margin: auto;
                width: 1220px;
                height: 64px;
            }
            .partner li{
                float: left;
                margin: 10px 10px;
            }
            .f{
                color: gray;
                width: 1220px;
                margin: 10px auto;
            }
            .friend{
                margin: auto;
                width: 1220px;
                height: 50px;
            }
            .friend li{
                float: left;
                color: gray;
                margin: 10px 10px;
                border-right:1px solid gray;
                padding-right: 15px;
            }
            .fooder{
                color: gray;
                background: black;
                height: 33px;
                margin: 5px;
            }
            .fooder .left{
                float: left;
            }
            .fooder .left li{
                float: left;
                border-right:1px solid gray;
                padding-right: 15px;
                margin: 5px;
            }
            .fooder .right{
                float: right;
                margin: 5px;
            }
        </style>
    </head>
    <body style="background-color:#f5f5f5;">
        
        <div class="header">
            <span class="left">三 </span>
           <div class="head">
               <ul>
                   <li>赞</li>
                   <li>萌</li>
                   <li>哈</li>
                   <li>艹</li>
                   <li>买</li>
               </ul>
           </div>
           <div class="head2">登录</div>
        </div>
        <div class="banner">
            <img src="images/s003.jpg" class="letf">
            <ul class="right">
                <li><p>想点亮圣诞气氛？试试这个「驯鹿」灯</p><img src="images/s02.jpg" alt=""></li>
                <li><p>Designer100，100个设计师，100个故事</p><img src="images/s03.jpg" alt=""></li>
                <li><p>旧椅子获新生，还比以前更酷炫了</p><img src="images/s04.jpg" alt=""></li>
            </ul>
        </div>
        <ul class="menu">
            <li>最新</li>
            <li>最热</li>
            <li>热议</li>
            <li>随机</li>
        </ul>
        <ul class="list">
            <li><img src="images/i01.jpg" alt=""><p>用水才能擦去笔迹，它只想保护好设计师的创意</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i02.jpg" alt=""><p>马桶刷也要有优雅的姿态</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i03.jpg" alt=""><p>健身也走「科技范」，你以为这仅仅只是个瑜伽垫？</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i04.jpg" alt=""><p>牙缝清洁怎么办？牙签牙线都过时了，用「刷子」刷吧</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i05.jpg" alt=""><p>矮怎么了？照样能够拿到书架顶端的书</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i06.png" alt=""><p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业……</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i07.jpg" alt=""><p>中国国际设计节 PK 世界工业设计大会，哪个更棒？</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i07.png" alt=""><p>首届世界工业设计大会开在家门口杭州，中国设计师们躁起来</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i08.jpg" alt=""><p>窝在北方的暖炉里，你应该需要这样一个散热阀门？</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p></li>

            <li><img src="images/i09.jpg" alt=""><p>废纸打造的铅笔，像是一朵朵落入凡间的花</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i10.jpg" alt=""><p>倚靠在毯子上，这件事听着就让人舒坦</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p>
            </li>
            <li><img src="images/i11.jpg" alt=""><p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就能变</p>
                <p><span class="left">2小时前</span><span class="right1">11</span><span class="right2">211</span></p></li>
                
        </ul>
        <div class="more">太快了，慢慢来：）</div>
        <p class="w">合作伙伴</p>
        <ul class="partner">
            <li><img src="images/x01.png" alt=""></li>
            <li><img src="images/x02.png" alt=""></li>
            <li><img src="images/x03.png" alt=""></li>
            <li><img src="images/x04.png" alt=""></li>
            <li><img src="images/x05.png" alt=""></li>
            <li><img src="images/x06.png" alt=""></li>
            <li><img src="images/x07.jpg" alt=""></li><br><br>
        </ul>
        
        <div class="f">
           <p>友情链接</p>
        <ul class="friend">
            <li>DRC北京设计创意产业基地</li>
            <li>中国工业设计协会</li>
            <li>设计帮</li>
            <li>网易家居</li>
            <li>凤凰家居</li>
            <li>智东西</li>
            <li>壹网空间</li>
            <li>七头牛存储</li>
            <li>高清图片</li>
            <li>Fotor</li>
        </ul>       
    </div>
     <div class="fooder">
            <div class="left">
                <ul>
                    <li>关于</li>
                    <li>合作</li>
                    <li>投稿</li>
                    <li>工业设计导航</li>
                    <li>站点地图</li>
                </ul>
            </div>
            <div class="right">
                <p>2016@设计癖</p>
            </div>
        </div> 
    </body>
</html>